<!-- 底部标签栏组件 -->
<template>
  <div class="docker">
    <div 
      v-for="item in dockerList" 
      :key="item.iconfont" 
      :class="'docker-item' + (item.active ? ' docker-item-active' : '')"
      @click="$router.push({name:item.path})">
      <i class="iconfont" v-html="item.iconfont"></i>
      <span class="docker-text">{{ item.name }}</span>
    </div>

  </div>
</template>

<script>
// 图标样式逻辑
const useIconfont = page => {
  const dockerList = [
    { name: '首页', iconfont: '&#xe634;',path:'home' },
    { name: '购物车', iconfont: '&#xe6e8;',path:'cart' },
    { name: '订单', iconfont: '&#xe61b;',path:'order' },
    { name: '我的', iconfont: '&#xe651;',path:'personal' },
  ];
  dockerList.map(item => {
    if (item.path === page) item.active = true;
    else item.active = false;
  });
  return dockerList;
}
// composition
export default {
  name: 'docker',
  setup(props, context) {
    const dockerList = useIconfont(context.attrs.page);
    return { dockerList };
  }
}
</script>

<style scoped lang="scss">
@import '../styles/theme.scss';
.docker {
  width: 100%;
  height: 13.0667vw;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  box-shadow: 0 -1px 1px #F1F1F1;
  padding-top: 1.8667vw;
  &-item {
    flex: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    .iconfont {
      font-size: 5.3333vw;
      margin-bottom: 0.5333vw;
    }
  }
  &-item-active {
    color: $theme-color;
    .docker-text {
      color: $theme-color;
    }
  }
  &-text {
    font-size: 5.3333vw;
    font-weight: bold;
    color: $theme-font-color;
    transform-origin: center top;
    transform: scale(.5);
  }
}</style>